<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useGetCbCategoryList, useGetCbProductSupplierPageList } from '@fl/api/supplier'
import { SearchForm, SearchTable } from '@fl/components'
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash-es'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: '/supplier-pages/pricing-tool/bid-home',
})

const { data: CategoryList, isLoading: CategoryLoading } = useGetCbCategoryList()

const categoryOptions = computed(() => CategoryList.value?.map((item: any) => ({
    label: item.categoryName,
    value: item.id,
})) || [])

const router = useRouter()

const route = useRoute()

const initialState = {
    categoryId: '',
    productName: '',
}
const state = ref(cloneDeep(initialState))

const columns: PlusColumn[] = [
    {
        label: '组价名称',
        prop: 'productName',

    },
    {

        label: '商品类目',
        options: categoryOptions,
        prop: 'categoryId',
        valueType: 'select',
    },
]

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}

const tablePage = ref(cloneDeep(initialPage))

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { fixed: 'left', title: '序号', type: 'seq', width: 50 },
        { field: 'productName', slots: { default: 'productName' }, title: '组价名称' },
        { field: 'enterpriseName', title: '招标单位' },
        { field: 'categoryName', title: '商品类目' },
        { field: 'publishTime', title: '发布日期' },
        { field: 'endTime', title: '截止日期' },
        { slots: { default: 'operate' }, title: '操作', width: 100 },
    ],
    maxHeight: 600,
    rowConfig: {
        keyField: 'id',
    },
})

const search = computed(() => {
    return {
        ...state.value,
        page: tablePage.value.currentPage,
        size: tablePage.value.pageSize,
    }
})

const { data: pageData, isLoading: pageLoading } = useGetCbProductSupplierPageList(search)

function reset() {
    state.value = cloneDeep(initialState)
    tablePage.value = cloneDeep(initialPage)
}

function submit(values: any) {
    state.value = cloneDeep(values)
    tablePage.value.currentPage = 1
}

function groupPrice(row: any) {
    router.push(`${route.path}/${row.id}`)
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

watchEffect(() => {
    if (pageData.value) {
        tablePage.value.total = pageData.value.total
    }
})
</script>

<template>
    <el-skeleton v-if="CategoryLoading"
                 :rows="3"
    />

    <template v-else>
        <ElCard shadow="never"
                mb-20
        >
            <SearchForm v-bind="state"
                        :columns="columns"
                        submit-text="搜索"
                        @reset="reset"
                        @submit="submit"
            />
        </ElCard>

        <ElCard shadow="never">
            <SearchTable v-bind="gridOptions"
                         v-model:pager="tablePage"
                         :seq-config="{ startIndex: (tablePage.currentPage - 1) * tablePage.pageSize }"
                         :loading="pageLoading"
                         :data="pageData?.records"
                         @page-change="handlePageChange"
            >
                <template #productName="{ row }">
                    <ElButton text
                              type="primary"
                              @click="groupPrice(row)"
                    >
                        {{ row.productName }}
                    </ElButton>
                </template>

                <template #operate="{ row }">
                    <ElButton text
                              type="primary"
                              @click="groupPrice(row)"
                    >
                        {{ dayjs().isBefore(row.endTime) ? '组价' : '查看' }}
                    </ElButton>
                </template>
            </SearchTable>
        </ElCard>
    </template>
</template>
